<template>
	<Layout class-name="matchDetail layout-bg showH" :pagebg="1">
    <fa-navbar :title="title" title-color="#000" back-text-style="color:#000" :border-bottom="false"></fa-navbar>
    <template v-if="detail">
      <view class="paddLR main main1">
        <!-- banner -->
        <template v-if="detail.images_text && detail.images_text.length > 0">
        	<u-swiper :list="detail.images_text" @click="preview(detail.images_text, swiperIndex)" @change="swiperChange" height="562" border-radius="0"></u-swiper>
        </template>
        
        <view class="mt30 flex-be mb30">
          <view class="name f32 u-flex-1">{{detail.title}}</view>
          <view class="flex-ct ml60" @click="pupshow = true">
            <image src="/home/static/imgs/icon-share.png" class="img32" mode=""></image>
            <text class="f24 color-666 ml10">分享赛事</text>
          </view>
        </view>
        <view class="status color-red mb30">{{detail.status_text}}</view>
        <address-map :detail="detail" />
      </view>
      <!-- status 1 - 待报名, 2-报名中, 3-待开赛, 4-开赛中, 5-已结束, 0-下架 -->
      <view class="paddLR main main2 flex-bect stepList" :class="'status'+curStatus">
        <template v-for="(item, index) in stepList">
          <view class="item" :class="'item'+index">
            <image :src="item.icon" class="img50 icon"></image>
            <view class="name">{{item.name}}</view>
            <view class="date">{{item.date}}</view>
            <view class="time">{{item.time}}</view>
          </view>
          <image src="@/home/static/imgs/jt3.png" class="img20 jt" :class="'jt'+index" mode=""></image>
        </template>
      </view>
      <view class="paddLR main main3">
        <view class="name">{{detail.title}}</view>
        <view class="content">
          <uv-parse :content="detail.content"></uv-parse>
          <!-- <ux-parse :content="detail.content" @navigate="linkOther"></ux-parse> -->
        </view>
      </view>
    </template>
    
    <!-- 分享朋友圈 -->
    <u-popup v-model="pupshow" mode="bottom" border-radius="20" :closeable="true">
      <view class="pup-box f26">
        <view class="title color-333">分享至:</view>
        <view class="flex-ct con">
          <button open-type="share" class="item">
            <image src="/home/static/imgs/wx.png" class="img76 img"></image>
            <view class="p">分享微信好友</view>
          </button>
        </view>
      </view>
    </u-popup>
    <!-- 底部操作区域 -->
    <!-- status 1 - 待报名, 2-报名中, 3-待开赛, 4-开赛中, 5-已结束, 0-下架 -->
    <zb-bottom v-if="detail" :h="126">
      <view class="submit-btn" @click="linkTo" :class="{no: detail.status != 2 || detail.register}">
        <template v-if="detail.register">已报名</template>
        <template v-else-if="detail.status == 2">立即报名</template> 
        <template v-else-if="detail.status == 3 || detail.status == 4 || detail.status == 5">报名已截止</template>
      </view>
    </zb-bottom>
  </Layout>
</template>

<script>
	export default {
		data() {
			return {
        title:'',
        emptyShow:false,
        canClick:false,
        pupshow:false,
        detail:null,
        stepList:[
          {id:1, name:'开始报名', date:'', time:'', icon: require('@/home/static/imgs/match-icon1.png')},
          {id:2, name:'报名截止', date:'', time:'', icon: require('@/home/static/imgs/match-icon2.png')},
          {id:3, name:'开始比赛', date:'', time:'', icon: require('@/home/static/imgs/match-icon3.png')},
          {id:4, name:'比赛结束', date:'', time:'', icon: require('@/home/static/imgs/match-icon4.png')}
        ],
        curStatus:0,
        content:"",
        register_id:'',
        swiperIndex: 0,
			}
		},
    onLoad(e) {
      this.register_id = e.register_id || ''
      uni.showLoading()
      this.$api.activityDetailApi({id: e.id}).then(res=>{
        this.detail = res.data;
        this.title = res.data.title;
        this.getDateTime(res.data.reg_start_time_text, 0);
        this.getDateTime(res.data.reg_end_time_text, 1);
        this.getDateTime(res.data.start_time_text, 2);
        this.getDateTime(res.data.end_time_text, 3);
        
        
        // 获取当前时间的时间戳（秒）
        const now = Math.floor(Date.now() / 1000);
        let status = 0;
        if (now >= this.detail.reg_start_time && now <= this.detail.reg_end_time) {
            // 当前时间在报名期间
            status = 1;
        } else if (now > this.detail.reg_end_time && now < this.detail.start_time) {
            // 报名已结束，但比赛尚未开始
            status = 2;
        } else if (now >= this.detail.start_time && now <= this.detail.end_time) {
            // 比赛正在进行中
            status = 3;
        } else if (now > this.detail.end_time) {
            // 比赛已经结束
            status = 4;
        } else {
            // 其他情况（理论上不会发生）
            status = 0;
        }
        this.curStatus = status;
        console.log("当前状态：", status);
        
        uni.hideLoading()
      }).catch(() =>{
        getApp().hideLoad()
      })
    },
		methods: {
      linkOther(e){
        getApp().linkToOther(e)
      },
      swiperChange(index) {
      	this.swiperIndex = index;
      },
      openTencentMapNavigation() {
        // 假设目标位置经纬度，实际使用时需替换为真实的目标位置
        const latitude = Number(this.detail.lat || 22.5470); 
        const longitude = Number(this.detail.lng || 113.9519); 
        const name = "腾讯大厦";
        const address = "广东省深圳市南山区科技中一路";
        uni.openLocation({
          latitude,
          longitude,
          name,
          address,
          scale: 18,
          success: (res) => {
            console.log('打开地图成功', res);
          },
          fail: (err) => {
            console.error('打开地图失败', err);
          }
        });
      },
      getDateTime(e, i){
        if(e){
          const end = e.split(' ')
          this.stepList[i].date = end[0];
          if(end.length > 1){
            this.stepList[i].time = end[1]
          }
        }
      },
			search(value) {
				
			},
      chooseTabId(id){
        this.tabId = id
      },
      // status 1 - 待报名, 2-报名中, 3-待开赛, 4-开赛中, 5-已结束, 0-下架
      linkTo(){
        if(this.detail.register){
          uni.navigateTo({
            url:'/home/mine/registration'
          })
        }else if(this.detail.status == 2){
          uni.navigateTo({
            url:'/home/match/form?id='+this.detail.id+'&register_id='+this.register_id
          })
        }else{
          getApp().zbShowToast(b)
        }
      }
			
		},
    onPageScroll(e) {
      getApp().setNavFixed(this,e)
    },
    onReachBottom() {
      
    },
    onShareAppMessage() {
      return{
        title: this.detail.title
      }
    }
	}
</script>

<style lang="scss" scoped>
.status1 {
  .item2,.item3,.item1{
    color: #999 !important;
    .icon{filter: grayscale(100%);}
  }
  .jt2,.jt1{filter: grayscale(100%);}
  
}
.status2 {
  .item2,.item3{
    color: #999 !important;
    .icon{filter: grayscale(100%);}
  }
  .jt2{filter: grayscale(100%);}
}
.status3 {
  .item3{
    color: #999 !important;
    .icon{filter: grayscale(100%);}
  }
}


.banner{
  width: 100%; height: 320rpx;
  .img{display: block;width: 100%; height: 100%;}
}
.main{
  border-bottom: 10rpx solid #fafafa;
}
.main1{
  padding-bottom: 40rpx;
}
.main2{
  padding: 40rpx 0 44rpx;
  .item{color: #05b196; font-size: 22rpx; text-align: center;}
  .icon{display: block; margin: 0 auto 15rpx;}
  .jt3{display: none;}
  .jt{transform: rotate(180deg);}
}
.main3{
  border-bottom: none;
  padding: 76rpx 0;
  .name{font-size: 30rpx; text-align: center; margin-bottom: 20rpx;}
  .content{line-height: 1.8;}
}
.pup-box{
  .con{padding: 100rpx 0;}
  .item{
    position: relative; border: none; outline: none; background-color: transparent; box-shadow: none; line-height: 1;
    &::before,&::after{display: none;}
  }
  .img{display: block; margin: 0 auto 20rpx;}
}
</style>
